<template>
  <div style="overflow: hidden">
    <div v-if="!istitle" id="chartDom"> </div>
  </div>
</template>
<script setup lang="ts">
  import * as echarts from 'echarts'
  import { COLOR_ARR_BJ } from '@/utils/constants/common'

  const props = defineProps({
    tuData: Object,
    seleCanShus: Array,
    seleCanShuBools: Object,
    istitle: {
      type: Boolean,
      default: false
    },
    startTime: String,
    endTime: String
  })

  const yZhouList = ref<any>([])
  const canShuList = ref<any>([])
  const myChart = ref()

  watch(
    () => props.tuData,
    (val) => {
      let data = JSON.parse(JSON.stringify(val))
      if (!('canShuData' in data)) {
        return
      }
      yZhouList.value = []
      canShuList.value = data.canShuData.map((value, index) => {
        if (index < data.canShuShuLiang) {
          return {
            name: value.title,
            type: 'line',
            smooth: true,
            yAxisIndex: index,
            lineStyle: {
              normal: {
                width: 1
              }
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: COLOR_ARR_BJ[index].bjColor
                    },
                    {
                      offset: 0.8,
                      color: COLOR_ARR_BJ[index].diBuColor
                    }
                  ],
                  false
                ),
                shadowColor: 'rgba(0, 0, 0, 0.1)',
                shadowBlur: 10
              }
            },
            itemStyle: {
              normal: {
                color: COLOR_ARR_BJ[index].titleColor
              }
            },
            data: value.valueData
          }
        } else {
          return {
            name: value.title,
            type: 'line',
            smooth: true,
            yAxisIndex:
              value.title.indexOf('温度') !== -1 ? data.canShuShuLiang : data.canShuShuLiang + 1,
            lineStyle: {
              normal: {
                width: 1
              }
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: COLOR_ARR_BJ[index].bjColor
                    },
                    {
                      offset: 0.8,
                      color: COLOR_ARR_BJ[index].diBuColor
                    }
                  ],
                  false
                ),
                shadowColor: 'rgba(0, 0, 0, 0.1)',
                shadowBlur: 10
              }
            },
            itemStyle: {
              normal: {
                color: COLOR_ARR_BJ[index].titleColor
              }
            },
            data: value.valueData
          }
        }
      })
      if (data.canShuData.length === data.yZhouArr.length) {
        let arrY = data.yZhouArr.map((value, index) => {
          return {
            type: 'value',
            name: value.title,
            position: 'left',
            offset: 60 * index,
            alignTicks: true,
            min: function (value) {
              // 取最小值向下取整为最小刻度
              return Math.floor(value.min != 0 ? value.min - value.min * 0.0001 : 0)
            },
            max: function (value) {
              // 取最大值向上取整为最大刻度
              return Math.ceil(value.max * 1.0001)
            },

            axisTick: {
              // 刻度
              show: true
            },
            splitLine: {
              show: false
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: COLOR_ARR_BJ[index].titleColor
              }
            },
            axisLabel: {
              formatter: '{value}',
              margin: 10,
              textStyle: {
                fontSize: 14
              }
            }
          }
        })
        yZhouList.value.push(...arrY)
      } else {
        let arrY = data.yZhouArr.map((value, index) => {
          return {
            type: 'value',
            name: value.title,
            position: 'left',
            offset: 60 * index,
            min: function (value) {
              // 取最小值向下取整为最小刻度
              return Math.floor(value.min != 0 ? value.min - value.min * 0.0001 : 0)
            },
            max: function (value) {
              // 取最大值向上取整为最大刻度
              return Math.ceil(value.max * 1.0001)
            },

            alignTicks: true,
            axisTick: {
              // 刻度
              show: true
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: COLOR_ARR_BJ[index].bjColor
              }
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: COLOR_ARR_BJ[index].titleColor
              }
            },
            axisLabel: {
              formatter: '{value}',
              margin: 10,
              textStyle: {
                fontSize: 14
              }
            }
          }
        })
        yZhouList.value.push(
          ...arrY,
          {
            type: 'value',
            name: '湿度%',
            min: 0, // 最小值
            max: 100, // 最大值
            position: 'right',
            offset: 0,
            // alignTicks: true,
            axisTick: {
              // 刻度
              show: true
            },
            splitLine: {
              show: false
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#fa0126'
              }
            },
            axisLabel: {
              formatter: '{value}%',
              margin: 10,
              textStyle: {
                fontSize: 14
              }
            }
          },
          {
            type: 'value',
            name: '温度℃',
            position: 'right',
            offset: 60,
            min: 0, // 最小值
            max: 100, // 最大值
            // alignTicks: true,
            axisTick: {
              // 刻度
              show: true
            },
            splitLine: {
              show: false
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#fa0126'
              }
            },
            axisLabel: {
              formatter: '{value}℃',
              margin: 10,
              textStyle: {
                fontSize: 14
              }
            }
          }
        )
      }
      nextTick(() => {
        handleSetVisitChart()
      })
    },
    { deep: true }
  )

  const handleSetVisitChart = () => {
    myChart.value = echarts.init(document.getElementById('chartDom'))
    let option = {
      backgroundColor: '#ffffff',
      title: {
        text: '',
        textStyle: {
          fontWeight: 'normal',
          fontSize: 16,
          color: '#343232'
        },
        left: '0%'
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          lineStyle: {
            color: '#57617B'
          }
        }
      },
      legend: {
        icon: 'rect',
        itemWidth: 14,
        itemHeight: 5,
        itemGap: 13,
        data: props.seleCanShus,
        top: '4%',
        right: 160,
        textStyle: {
          fontSize: 12,
          color: '#3b3b3d'
        },
        selected: props.seleCanShuBools
      },
      grid: {
        left: 60,
        right: '2.6%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: [
        {
          type: 'time',
          min: props.endTime,
          max: props.startTime,
          axisTick: {
            // 刻度
            show: true
          },
          splitLine: {
            show: false
          },
          // type: 'category',
          boundaryGap: false,
          axisLine: {
            show: true,
            lineStyle: {
              color: '#57617B'
            }
          }
          //   data: _this.timeData
        }
      ],
      yAxis: yZhouList.value,
      series: canShuList.value
    }
    myChart.value.setOption(option, true)
    window.addEventListener('resize', function () {
      myChart.value.resize()
    })
  }

  onUnmounted(() => {
    myChart.value.dispose()
  })
</script>

<style scoped>
  #chartDom {
    height: calc(100vh - 290px);
  }
</style>
